<template>
    <div class="tw:w-[50%]">
        <div class="tw:flex tw:flex-row tw:gap-1 tw:p-4">
            <div class="tw:w-16 tw:h-8 tw:bg-purple-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
            <div class="tw:w-16 tw:h-8 tw:bg-purple-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">02</div>
            <div class="tw:w-16 tw:h-8 tw:bg-purple-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">03</div>
        </div>
        <div class="tw:flex tw:flex-row-reverse tw:gap-1 tw:p-4">
            <div class="tw:w-16 tw:h-8 tw:bg-blue-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
            <div class="tw:w-16 tw:h-8 tw:bg-blue-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">02</div>
            <div class="tw:w-16 tw:h-8 tw:bg-blue-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">03</div>
        </div>
        <div class="tw:flex tw:flex-col tw:gap-1 tw:p-4">
            <div class="tw:w-16 tw:h-8 tw:bg-cyan-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
            <div class="tw:w-16 tw:h-8 tw:bg-cyan-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">02</div>
            <div class="tw:w-16 tw:h-8 tw:bg-cyan-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">03</div>
        </div>
        <div class="tw:flex tw:flex-col-reverse tw:gap-1 tw:p-4">
            <div class="tw:w-16 tw:h-8 tw:bg-blue-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
            <div class="tw:w-16 tw:h-8 tw:bg-blue-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">02</div>
            <div class="tw:w-16 tw:h-8 tw:bg-blue-400 tw:rounded-md tw:flex tw:justify-center tw:items-center">03</div>
        </div>
    </div>
</template>